<template>
	<div>
		<div class="banner" @click="handleBannerClick">
			<img class="banner-img" src="http://img1.qunarzz.com/sight/p0/1704/c9/c936f3fccfc6d7eda3.img.jpg_600x330_1be7ea5e.jpg">
			<div class="banner-info">
				<div class="banner-num">
					<span class="iconfont banner-icon">&#xe68a;</span> {{this.$data.imgs.length}}
				</div>
				<div class="banner-title">上海杜莎夫人蜡像馆(AAAA景区)</div>
			</div>
		</div>
		<common-gallary :imgs="imgs" v-show="showGallary" @close="handleGallaryClose"></common-gallary>
	</div>
</template>

<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
	name: 'DetailBanner',
	components: {
		CommonGallary
	},
	data () {
		return {
			showGallary: false,
			imgs:[
				"http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_800x800_70debc93.jpg",
				"http://img1.qunarzz.com/sight/p0/1709/76/7691528bc7d7ad3ca3.img.png_800x800_9ef05ee7.png",
				"http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_800x800_70debc93.jpg",
				"http://img1.qunarzz.com/sight/p0/1709/76/7691528bc7d7ad3ca3.img.png_800x800_9ef05ee7.png",
			]
		}
	},
	methods: {
		handleBannerClick () {
			this.showGallary = true
		},
		handleGallaryClose () {
			this.showGallary = false
		}
	}
}
</script>

<style lang="scss" scoped>
	.banner{
		position: relative;
		overflow: hidden;
		height: 0;
		padding-bottom: 55%;
		.banner-img{
			width: 100%;
		}
		.banner-info{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			line-height: .6rem;
			color: #fff;
			background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.8));
			.banner-title{
				height: .4rem;
				line-height: .4rem;
				padding: 0 .2rem .2rem;
				font-size: .36rem;
			}
			.banner-num{
				width: .6rem;
				height: .4rem;
				padding: 0 .3rem;
				background: rgba(0,0,0,.5);
				line-height: .4rem;
				border-radius: .2rem;
				font-size: .16rem;
				margin: 0 0 .1rem .2rem;
				.banner-icon{
					font-size: .24rem;
				}
			}
		}
	}
</style>